<template>
  <basic-container>
    <div ref="demo">
        <article v-for="item in divData" :key="item.id" :ref="'container-' + item.id" @click="clickHandle(item.id)"   @mousedown="mouseDownHandle(item.id, $event)" @mouseup="mouseUpHandle(item.id, $event)">
          <div>{{item.titlie}}---{{item.id}}</div>
          <div>{{item.titlie}}---{{item.id}}</div>
          <div>{{item.titlie}}---{{item.id}}</div>
        </article>
      </div>
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      divData:[
        {titlie: '测试一', id:'001'},
        {titlie: '测试二', id:'002'},
        {titlie: '测试三', id:'003'},
        {titlie: '测试四', id:'004'},
        {titlie: '测试五', id:'005'}
      ],
      moveData: {},
      activeMove: null
    };
  },
  methods: {
    // 拖拽-鼠标放下
    mouseDownHandle (id, event) {
      this.activeMove = id
      //this.clickHandle(id)
      if (this.moveData[id]) {
        this.moveData[id].x = event.pageX - this.$refs[`container-${id}`][0].offsetLeft,
        this.moveData[id].y = event.pageY - this.$refs[`container-${id}`][0].offsetTop
      } else {
        this.moveData[id] = {
          x: event.pageX - this.$refs[`container-${id}`][0].offsetLeft,
          y: event.pageY - this.$refs[`container-${id}`][0].offsetTop
        }
      }
      event.currentTarget.style.cursor = 'move'
      window.onmousemove = this.mouseMoveHandle
    },
    // 拖拽-鼠标移动
    mouseMoveHandle (event) {
      let moveLeft = event.pageX - this.moveData[this.activeMove].x + 'px'
      let moveTop = event.pageY - this.moveData[this.activeMove].y + 'px'
      //this.$console.log(event)
      this.$refs[`container-${this.activeMove}`][0].style.left = moveLeft
      this.$refs[`container-${this.activeMove}`][0].style.top = moveTop
    },
    // 拖拽-鼠标离开
    mouseUpHandle (id, event) {
      window.onmousemove = null
      event.currentTarget.style.cursor = 'move'
      //this.$console.log('====moveData===',this.moveData);
    },
  }
}
</script>
<style>
    article:nth-of-type(1){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 20px;
    left: 50px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
  article:nth-of-type(2){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 420px;
    left: 50px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
  
</style>
